<template>
  <el-dialog v-model="show" :show-close="false" destroy-on-close>
    <div class="author-container">
      <el-radio-group v-model="mode">
        <el-radio-button :label="modes[0]"></el-radio-button>
        <el-radio-button :label="modes[1]"></el-radio-button>
      </el-radio-group>
    </div>
    <el-image :src="imageUrl" fit="fill"></el-image>
    <div class="footer" v-if="isShowFooter">
      <el-button size="default" type="warning" @click="close">
        偷偷打赏
      </el-button>
      <el-button size="default" class="cancal" @click="close">
        下次一定
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, computed, ref, unref, defineExpose } from "vue";
const modes = ref([]);
const images = ref([]);
const show = ref(false);
const mode = ref("");
// 接收父组件属性
const props = defineProps({
  isShowFooter: {
    type: Boolean,
    default: false,
  },
});
const imageUrl = computed(() => {
  return unref(mode) === unref(modes)[0] ? unref(images)[0] : unref(images)[1];
});
const open = (m, i) => {
  modes.value = m;
  images.value = i;
  mode.value = m[0];
  show.value = true;
};
const close = () => {
  show.value = true;
};
defineExpose({ open }); // 暴露给父组件使用(关键)
</script>

<style scoped>
.author-container {
  width: 100%;
  display: flex;
  justify-content: center;
}
.footer {
  display: flex;
  justify-content: space-between;
}

.cancal {
  margin-left: 6px;
}

.cancal:hover {
  /* display: none; */
  opacity: 0;
}
.el-button {
  padding: 8px 12px;
}
</style>
